<template>
  <view class="container">
    <!-- 页面头部标题 -->
    <view class="new-page-header">
      <!-- 状态栏占位 -->
      <view class="new-status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
      <!-- 导航栏 -->
      <view class="new-nav-bar" :style="{ height: navBarHeight + 'px' }">
        <!-- 标题 -->
        <view class="new-header-title" :style="{ lineHeight: navBarHeight + 'px' }">个人中心</view>
      </view>
    </view>

    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 用户信息卡片 -->
      <view class="user-card" v-if="userInfo.user_id">
        <view class="user-avatar">
          <image class="avatar-image" :src="userInfo.avatar" mode="aspectFill"></image>
        </view>
        <view class="user-info">
          <view class="user-name">{{
            userInfo.nickname || userInfo.mobile
          }}</view>
          <view class="user-id">ID：{{ userInfo.user_id }}</view>
        </view>
      </view>

      <view class="user-card" v-else>
        <view class="user-avatar">
          <image class="avatar-image" src="/static/common/touxiang.png" mode="aspectFill"></image>
        </view>
        <view class="user-info" @click="goToLogin">
          请登陆
        </view>
      </view>

      <!-- 钱包卡片 -->
      <view class="wallet-card" v-if="isAdmin">
        <view class="wallet-title">可提现金额：{{ userInfo.money }} 元</view>
        <view class="wallet-buttons" style="display: flex; justify-content: center; align-items: center;">
          <view class="wallet-btn cash-btn" @click="handleCashOut" style="width: 80%;">
            <view class="btn-text">提现</view>
          </view>
          <!-- <view class="wallet-btn detail-btn" @click="handleFundDetail">
            <view class="btn-text">资金明细</view>
          </view> -->
        </view>
      </view>

      <!-- 功能卡片 -->
      <view class="function-card">
        <view class="function-item" v-for="(item, index) in functionList" :key="index"
          @click="handleFunctionClick(item)">
          <view class="function-icon">
            <u-icon :name="item.icon" size="40" color="#666666"></u-icon>
          </view>
          <view class="function-text">{{ item.name }}</view>
          <view class="function-arrow">
            <u-icon name="arrow-right" size="32" color="#cccccc"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import navbarMixin from "@/common/mixin/navbar.js";
import { getUserInfo, isAdmin as getUserIsAdmin, applyWithdraw } from "@/api/index.js";

export default {
  mixins: [navbarMixin],

  data() {
    return {
      // 功能列表数据
      functionList: [
        { id: 1, name: "故障报修", icon: "warning", route: "" },
        { id: 2, name: "客服中心", icon: "chat", route: "" },
        { id: 3, name: "服务协议", icon: "file-text", route: "" },
        { id: 4, name: "操作指南", icon: "question-circle", route: "" },
        { id: 5, name: "关于我们", icon: "info-circle", route: "" },
        { id: 6, name: "常见问题", icon: "file-text", route: "" },
      ],
      userInfo: undefined,
      isAdmin: false,
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onShow() {
    this.getInfo()

    // 判断当前用户是否管理员
    const _res = await getUserIsAdmin();

    this.isAdmin = _res.role > 0;

  },

  methods: {
    async getInfo() {
      // 获取用户信息
      const _data = await getUserInfo();



      this.userInfo = _data;

    },
    /**
     * 提现功能
     */
    async handleCashOut() {

      const app = this;

      wx.requestSubscribeMessage({
        tmplIds: ['M7JSh-yGGlAho15Fyq53QTpdqFXdRXPGDXydhm7RU9M'],
        success(res) {
          console.log(res)
        },
        fail(res) {
          console.log(res)
        }
      })

      try {
        uni.showLoading({
          title: "正在处理",
          mask: true,
        });
        const _res = await applyWithdraw({
          amount: app.userInfo.money,
        });


        wx.requestMerchantTransfer({
          mchId: '1721801946',
          appId: wx.getAccountInfoSync().miniProgram.appId,
          package: _res.package_info,
          success: (res) => {
            // res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
            console.log('success:', res);
            uni.showToast({
              title: '提现成功',
            });



            app.getInfo()


            // 刷新数据

          },
          fail: (res) => {
            console.log('fail:', res);
            uni.showModal({
              title: '提示',
              content: '请点击收款',
              showCancel: false,
              success: ({ confirm, cancel }) => {
                if (confirm) {
                  wx.requestMerchantTransfer({
                    mchId: '1721801946',
                    appId: wx.getAccountInfoSync().miniProgram.appId,
                    package: _res.package_info,
                    success: (res) => {
                      // res.err_msg将在页面展示成功后返回应用时返回ok，并不代表付款成功
                      console.log('success:', res);
                      uni.showToast({
                        title: '提现成功',
                      });



                      app.getInfo()


                      // 刷新数据

                    },
                  })
                }
              }
            })
          },
        });

      } catch (error) {

      }
      // uni.navigateTo({
      //   url: "/pages/newwithdraw/index",
      // });
    },

    /**
     * 资金明细
     */
    handleFundDetail() {
      uni.navigateTo({
        url: "/pages/newbalance/index",
      });
    },

    /**
     * 功能项点击
     */
    handleFunctionClick(item) {
      switch (item.name) {
        case "故障报修":
          uni.navigateTo({
            url: "/pages/newrepair/index",
          });
          break;
        case "客服中心":
          uni.navigateTo({
            url: "/pages/newservice/index",
          });
          break;
        case "服务协议":
          uni.navigateTo({
            url: "/pages/newagreement/index",
          });
          break;
        case "操作指南":
          uni.navigateTo({
            url: "/pages/newguide/index",
          });
          break;
        case "关于我们":
          uni.navigateTo({
            url: "/pages/newabout/index",
          });
          break;
        case "常见问题":
          uni.navigateTo({
            url: "/pages/newfaq/index",
          });
          break;
        default:
          uni.showToast({
            title: item.name + "功能",
            icon: "none",
          });
      }
    },
    // 前往登陆页
    goToLogin() {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
  },

  /**
   * 分享当前页面
   */
  onShareAppMessage() {
    return {
      title: "个人中心",
      path: "/pages/newuser/index",
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-content {
  padding-bottom: 120rpx;
}

// 用户信息卡片
.user-card {
  margin: 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;

  .user-avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;

    .avatar-image {
      width: 100%;
      height: 100%;
    }
  }

  .user-info {
    flex: 1;

    .user-name {
      font-size: 36rpx;
      font-weight: 600;
      color: #333333;
      margin-bottom: 16rpx;
    }

    .user-id {
      font-size: 28rpx;
      color: #999999;
    }
  }
}

// 钱包卡片
.wallet-card {
  margin: 0 30rpx 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 30rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);

  .wallet-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    text-align: center;
    margin-bottom: 40rpx;
  }

  .wallet-buttons {
    display: flex;
    gap: 20rpx;

    .wallet-btn {
      // flex: 1;?
      height: 80rpx;
      border-radius: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .btn-text {
        font-size: 30rpx;
        font-weight: 500;
      }

      &.cash-btn {
        background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);

        .btn-text {
          color: #ffffff;
        }
      }

      &.detail-btn {
        background: #f8f9fa;
        border: 2rpx solid #74b9ff;

        .btn-text {
          color: #74b9ff;
        }
      }
    }
  }
}

// 功能卡片
.function-card {
  margin: 0 30rpx;
  background: #ffffff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;

  .function-item {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;

    &:last-child {
      border-bottom: none;
    }

    .function-icon {
      width: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .function-text {
      flex: 1;
      font-size: 30rpx;
      color: #333333;
      margin-left: 20rpx;
    }

    .function-arrow {
      width: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
